<template>
  <div>
    <div :style="{ 'margin-top': '25px' }">
      <el-card>
        <el-table :data="tableList" style="width: 100%">
          <el-table-column prop="userName" label="接种人" align="center">
          </el-table-column>
          <el-table-column prop="callphone" label="联系方式" align="center">
          </el-table-column>
          <el-table-column prop="vaccinaName" label="接种疫苗" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleCancel(scope.row)"
                v-show="scope.row.state == '待接种'"
              >
                取消预约
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" align="center">
            <template slot-scope="scope">
              <el-tag
                type="success"
                v-show="scope.row.state == '已接种'"
                effect="dark"
                >已接种</el-tag
              >
              <el-tag effect="dark" v-show="scope.row.state == '待接种'">
                待接种
              </el-tag>
              <el-tag
                type="danger"
                v-show="scope.row.state == '已取消'"
                effect="dark"
              >
                已取消
              </el-tag>
              <el-tag
                type="info"
                v-show="scope.row.state == '已过期'"
                effect="dark"
              >
                已过期
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: {
        pageNum: 1,
        pageSize: 50,
        userId: ""
      },
      tableList: {},
      userData: {}
    };
  },
  methods: {
    async getTablelist() {
      const { data: res } = await this.$http.post(
        "appointment/getAppointmentPage",
        this.tableData
      );
      if (res.code == 200) {
        this.tableList = res.data.data;
        console.log(this.tableList);
      } else {
        this.$message.error(res.msg);
      }
    },
    handleCancel(e) {
      this.$confirm("是否取消预约?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post("/appointment/userCancelAppointment", {
              vaccineId: e.vaccineId,
              appointmentId: e.appointmentId
            })
            .then(res => {
              console.log(res.data.code);
              if (res.data.code == 200) {
                this.getTablelist();
                this.$message({
                  type: "success",
                  message: "取消成功!"
                });
              }
            });
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.tableData.userId = JSON.parse(
      sessionStorage.getItem("userData")
    ).userId;
    this.getTablelist();
  }
};
</script>

<style lang="less" scoped></style>
